<template>
  <a-spin :spinning="loading">
    <div class="pdf-wrapper" id="pdfContainer" style="height: 100vh"></div>
  </a-spin>
</template>
<script lang="ts" setup>
import { Spin as ASpin } from 'ant-design-vue'
import { initPdfView } from '../packages/index.ts'
import { onMounted, nextTick, ref } from 'vue'

const loading = ref(false)

onMounted(() => {
  loading.value = true
  const pdfPath = new URL('/src/assets/pdf.worker.min.mjs', import.meta.url).href
  nextTick(() => {
    initPdfView('#pdfContainer', {
      loadFileUrl: `http://10.31.68.32:8200/CN102768702A%20%E5%9F%BA%E4%BA%8E%E9%9B%86%E6%88%90%E6%8E%A7%E5%88%B6%E4%BC%98%E5%8C%96%E7%9A%84%E7%82%BC%E6%B2%B9%E7%94%9F%E4%BA%A7%E8%BF%87%E7%A8%8B%E8%B0%83%E5%BA%A6%E4%BC%98%E5%8C%96%E5%BB%BA%E6%A8%A1%E6%96%B9%E6%B3%95.pdf`,
      pdfPath: pdfPath,
      loading: (load: boolean) => {
        loading.value = load
      },
      //可选
      pdfOption: {
        search: false, // 搜索  todo 开发中
        scale: true, //缩放
        pdfImageView: true, //pdf 是否可以单片点击预览
        page: true, //分页查看
        navShow: true, //左侧导航
        navigationShow: false, // 左侧导航是否开启
        pdfViewResize: true, // 是否开启resize 函数 确保pdf 根据可视窗口缩放大小
        toolShow: true, // 是否开启顶部导航
        download: true, //下载
        clearScale: 5, // 清晰度 默认1.5 感觉不清晰调大 ,当然清晰度越高pdf生成性能有影响
        fileName: 'preview.pdf', // pdf 下载文件名称
      },
    })
  })
})
</script>

<style scoped lang="less">
.pdf-wrapper {
  width: 100%;
  padding: 0px;
  height: 100%;
}
</style>
